<template>
  <div v-if="recommeds.length" class="slider">
    <van-swipe :autoplay="3000" class="slider-group">
      <van-swipe-item v-for="(item,index) in recommeds" :key="index" class="slider-item">
        <a :href="item.linkUrl">
          <img :src="item.picUrl" alt />
        </a>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { getRecommend } from "../../api/recommend";
import { ERR_OK } from "../../api/config";
export default {
  data() {
    return {
      recommeds: []
    };
  },
  created() {
    this._getRecommend();
  },
  methods: {
    _getRecommend() {
      getRecommend().then(res => {
        if (res.code === ERR_OK) {
          this.recommeds = res.data.slider;
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/variable';

.slider
  min-height 1px;
  .slider-group
    position relative;
    overflow hidden;
    white-space nowrap;
    .slider-item
      float left;
      box-sizing border-box;
      overflow hidden;
      text-align center;
      a
        display block;
        width 100%;
        overflow hidden;
        text-decoration none;
      img
        display block;
        width 100%;
  .van-swipe__indicators
    width 20px;
    height 20px;
    .van-swipe__indicator
      width 20px;
      height 20px;
</style>
